<!DOCTYPE html>
<html lang="en" >
<head>
    <title>用戶管理页面</title>
    <meta name="renderer" content="webkit" >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <style type="text/css">
        #input-limit{
            height: 30px;
            background-color: #1e9fff;
            color: whitesmoke;
            width: 60px;
            border:1px #1e9fff;
            border-radius: 4px;
        }
        #input-limit:hover{
           background-color:#bbdaff;
        }
    </style>
</head>
<body>
<div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">患者列表</blockquote>
    <!-- 添加按钮 -->
    <a class="layui-btn layui-btn-sm" id="add-btn">增加患者</a>
    <!--&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 患者ID:<input type="text" style="width: 200px;height: 34px;font-size:18px" id="uid"> &nbsp; &nbsp; &nbsp;  患者姓名：<input type="text" style="width: 200px;height: 34px;font-size:18px" id="uname"> &nbsp; &nbsp; <button class="layui-btn" id="limit">查询</button>-->
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">ID查询:</span><input type="text" placeholder="请输入ID" id="input-uid" style="height: 30px"></a>
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">姓名查询:</span><input type="text" placeholder="请输入姓名" id="input-uname" style="height: 30px"></a>
    <button   id="input-limit">搜索</button>
   <hr/>
    <!-- 学生信息表 -->
    <table id="tbl" lay-filter="tbl"></table>
    <script type="text/html" id="tbl-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
</div>

<!-- 添加弹出层 -->
<div id="add-layer" style="display: none; padding: 20px">
    <form id="add-form" class="layui-form layui-form-pane">

        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">患者ID</label>-->
            <!--<div class="layui-input-block">-->
                <!--<label>-->
                    <!--<input type="text" name="uid" class="layui-input" lay-verify="required">-->
                <!--</label>-->
            <!--</div>-->
        <!--</div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">患者姓名</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="uname" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" id="idcardd" name="idcard" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="address" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="phone" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <label>
                    <input type="date" id="birthdayy" name="birthday" class="layui-input" lay-verify="required" readonly>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">患者性别</label>
            <div class="layui-input-block">
                <label>
                    <select name="sex" class="layui-input" lay-verify="required">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="password" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add-form-submit">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 修改弹出层 -->
<div id="update-layer" style="display: none; padding: 20px">
    <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">

        <div class="layui-form-item">
            <label class="layui-form-label">患者ID</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="uid" class="layui-input" lay-verify="required" readonly>
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">患者姓名</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="uname" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" id="idcard" name="idcard" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="address" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="phone" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <label>
                    <input type="date" id="birthday" name="birthday" class="layui-input" lay-verify="required" readonly>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">患者性别</label>
            <div class="layui-input-block">
                <label>
                    <select name="sex" class="layui-input" lay-verify="required">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="password" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="update-form-submit">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    //设置时间格式
    function myDateFomat(t){
        var date=new Date(t);
        var y=date.getFullYear();
        var m=(date.getMonth()+1).toString().padStart(2,"0");
        var d=date.getDate().toString().padStart(2,"0");
        return y+"-"+m+"-"+d;
    }
</script>


<script>


    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#tbl',
            url: '/user/list',
            method: 'get',
            initSort: { //排序
                field: 'account' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            cols: [[
                // {field: 'id', title: '患者编号'},
                {field: 'uid', title: '患者ID'},
                {field: 'uname', title: '患者姓名'},
                {field: 'idcard', title: '证件号'},
                {field: 'address', title: '现住址'},
                {field: 'phone', title: '手机号'},
                {field: 'birthday', title: '出生日期',templet: "<div>{{layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>", width: 130},
                {field: 'sex', title: '性别'},
                {field: 'password', title: '密码'},
                {toolbar: '#tbl-toolbar', title: '操作', width: 200}
            ]],
            page: {
                limit: 5,//指定每页显示的条数
                limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
            }//开启分页

            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            // 表格容器id，用于表格重载
            id: 'tbl'
        });
            var AddIndex;
              // 显示添加弹出层
              $('#add-btn').click(function () {
                  // 每次显示前重置表单
                  $('#add-form')[0].reset();
                  AddIndex = layer.open({
                      type: 1,
                      title: '添加患者',
                      skin: 'layui-layer-molv',
                      area: ['500px'],
                      content: $('#add-layer')
                  });
              });

          //    /////////////////
          
      $("#input-limit").click(function () {
                var uid=$("#input-uid").val();
                var uname=$("#input-uname").val();
                // var datt={"uid":uid,"uname":uname};
              table.render({
                  elem: '#tbl',
                  url: '/user/limitAll?uid='+uid+'&uname='+uname,
                  method: 'get',
                  initSort: { //排序
                      field: 'account' //排序字段，对应 cols 设定的各字段名
                      , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                  },
                  cols: [[
                      // {field: 'id', title: '患者编号'},
                      {field: 'uid', title: '患者ID'},
                      {field: 'uname', title: '患者姓名'},
                      {field: 'idcard', title: '证件号'},
                      {field: 'address', title: '现住址'},
                      {field: 'phone', title: '手机号'},
                      {field: 'birthday', title: '出生日期', templet: "<div>{{layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>", width: 130},
                      {field: 'sex', title: '性别'},
                      {toolbar: '#tbl-toolbar', title: '操作', width: 200}
                  ]],
                  page: {
                      limit: 5,//指定每页显示的条数
                      limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
                  }//开启分页

                  , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                      var result;
                      if (this.page.curr) {
                          result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                      } else {
                          result = res.data.slice(0, this.limit);
                      }
                      return {
                          "code": res.code, //解析接口状态
                          "msg": res.msg, //解析提示文本
                          "count": res.count, //解析数据长度
                          "data": result //解析数据列表
                      };
                  },
                  // 表格容器id，用于表格重载
                  id: 'tbl'
              })
            })
/////////////////////////////////////////////////////


//////////////








          // 添加表单提交
              form.on('submit(add-form-submit)',function (data) {
                   // ajax方式添加
                      $.get("/user/user_insert",data.field,function (data) {
                          if(data==true){
                              layer.close(AddIndex);
                              layer.msg('添加成功');
                              table.reload('tbl');
                          }else {
                              layer.msg('添加失败');
                          }
                      })
                   // 阻止表单跳转
                   return false;
               });


               table.on('tool(tbl)', function (obj) {
                   // 获取当前行数据和lay-event的值
                   var data = obj.data;
                   var event = obj.event;
                   // 删除事件
                if (event === 'del') {
                       layer.confirm('确定删除该吗？', function (index) {
                           console.log(index)
                           console.log(data.uid)
                           // ajax方式删除
                           $.get("/user/user_del",{uid:data.uid},function (data) {
                               if(data==true){
                                  layer.msg('删除成功');
                                  table.reload('tbl');
                               }else {
                                   layer.msg('删除失败');
                               }
                           })
                           layer.close(index);
                       });
                   }
                   var UpIndex;
                   // 修改数据回显
                   if (event === 'edit') {
                       // 表格数据回显
                       form.val('update-form', {
                           "uid": data.uid,
                           "uname": data.uname,
                           "idcard":data.idcard,
                           "address":data.address,
                           "phone":data.phone,
                           "birthday":myDateFomat(data.birthday),
                           "sex": data.sex,
                           "password": data.password,
                       });
                       // 显示修改表单的弹出层

                       UpIndex= layer.open({
                           type: 1,
                           title: '更新患者信息',
                           skin: 'layui-layer-molv',
                           area: ['500px'],
                           content: $('#update-layer')
                       });
                       // 修改表单提交
                     form.on('submit(update-form-submit)',function (data) {
                           // ajax方式修改
                         $.get("/user/user_update",data.field,function (data) {
                             if(data==true){
                                  layer.close(UpIndex);
                                  layer.msg('更新成功');
                                  table.reload('tbl');
                             }else {
                                 layer.msg('更新失败');
                             }
                         })
                           // 阻止表单跳转
                           return false;
                       });
                   }
               });
     })


</script>
</body>
</html>
<script>

$("#idcardd").blur(function () {
var idcad=$("#idcardd").val();
     getCheckId(idcad);
    var a=getCheckId(idcad)
if(a!="验证通过!"){
    layer.open({
        title:'错误提示'
        ,content:a
        ,icon:2
    })
    $("#idcardd").val("");
}else {
    layer.msg(a);
var idbirthday=getBirthday(idcad);
$("#birthdayy").val(idbirthday);
}
})

$("#idcard").blur(function () {
    var idcad=$("#idcard").val();
    getCheckId(idcad);
    var a=getCheckId(idcad)
    if(a!="验证通过!"){
        layer.open({
            title:'错误提示'
            ,content:a
            ,icon:2
        })
        $("#idcard").val("");
    }else {
        layer.msg(a);
        var idbirthday=getBirthday(idcad);
        $("#birthday").val(idbirthday);
    }
})




</script>
<script>

    //截取身份证号获得出生年月日
    function getBirthday(idno) {
        var birthday="";
        if (idno.length==18){
            var  year= idno.substr(6,4);
            var  month= idno.substr(10,2);
            var  day= idno.substr(12,2);
            birthday=year+"-"+month+"-"+day;
            return birthday;
        }else if(idno.length==15){
            var  year="19"+ idno.substr(6,2);
            var  month= idno.substr(8,2);
            var  day= idno.substr(10,2);
            birthday=year+"-"+month+"-"+day;
            return birthday;
        }
    }
    //身份证效验正则表达式
    function getCheckId(idcard) {
        var Errors = new Array("验证通过!", "身份证号码位数不对!", "身份证号码出生日期超出范围或含有非法字符!", "身份证号码校验错误!", "身份证地区非法!");
        var area = {
            11: "北京",
            12: "天津",
            13: "河北",
            14: "山西",
            15: "内蒙古",
            21: "辽宁",
            22: "吉林",
            23: "黑龙江",
            31: "上海",
            32: "江苏",
            33: "浙江",
            34: "安徽",
            35: "福建",
            36: "江西",
            37: "山东",
            41: "河南",
            42: "湖北",
            43: "湖南",
            44: "广东",
            45: "广西",
            46: "海南",
            50: "重庆",
            51: "四川",
            52: "贵州",
            53: "云南",
            54: "西藏",
            61: "陕西",
            62: "甘肃",
            63: "青海",
            64: "宁夏",
            65: "新疆",
            71: "台湾",
            81: "香港",
            82: "澳门",
            91: "国外"
        }
        var retflag = false;
        var idcard, Y, JYM;
        var S, M;
        var idcard_array = new Array();
        idcard_array = idcard.split("");
        //地区检验
        if (area[parseInt(idcard.substr(0, 2))] == null) return Errors[4];
        //身份号码位数及格式检验
        switch (idcard.length) {
            case 15:
                if ((parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0 || ((parseInt(idcard.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0)) {
                    ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/; //测试出生日期的合法性
                } else {
                    ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/; //测试出生日期的合法性
                }

                if (ereg.test(idcard)) {

                    return Errors[0];
                }
                else {
                    return Errors[2];
                }
                break;
            case 18:
                if (parseInt(idcard.substr(6, 4)) % 4 == 0 || (parseInt(idcard.substr(6, 4)) % 100 == 0 && parseInt(idcard.substr(6, 4)) % 4 == 0)) {
                    ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/; //闰年出生日期的合法性正则表达式
                } else {
                    ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/; //平年出生日期的合法性正则表达式
                }
                if (ereg.test(idcard)) { //测试出生日期的合法性
                    //计算校验位
                    S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3;
                    Y = S % 11;
                    M = "F";
                    JYM = "10X98765432";
                    M = JYM.substr(Y, 1); //判断校验位
                    if (M == idcard_array[17]) return Errors[0]; //检测ID的校验位
                    else return Errors[3];
                } else return Errors[2];
                break;
            default:
                return Errors[1];
                break;
        }
    };
</script>